<template>
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-content-top">
                <ul class="meizu-footer-service" v-if="footer !== null">
                    <li v-for="item of footer" :key="item.imgUrl">
                        <router-link to="">
                            <img v-lazy="item.imgUrl" :alt="item.severText">
                            {{item.severText}}
                        </router-link>
                    </li>
                </ul>
                <div class="onlive-server">
                    <span>周一至周日 7:30-24:00</span>
                    <p class="tel">000-000-0000</p>
                    <p class="onlive-btn">
                        <router-link to="">
                            <img
                                src="//www3.res.meizu.com/static/cn/_partial/footer/images/footer_icon_09_60fabcd.png?__inline 1x, //www3.res.meizu.com/static/cn/_partial/footer/images/footer_icon_09@2x_fe3806d.png?__inline 2x"
                                alt="">
                            <span>在线客服</span>
                        </router-link>
                    </p>
                </div>
            </div>
            <hr/>
            <div class="footer-content-bottom">
                <ul>
                    <li v-for="item in clearfix" :key="item.id">
                        <router-link to="">
                            {{item.info}}
                            <span>{{item.Segmenting}}</span>
                        </router-link>
                    </li>
                </ul>
                <p>©2018 Meizu Telecom Equipment Co., Ltd. All rights reserved.     粤ICP备13003602号 合字B2-20170010</p>
            </div>
        </div>
    </footer>
</template>

<script>
    export default {
        name: 'meizuFooterWrap',
        data() {
            return {
                footer: null,
                clearfix: [
                    {
                        id: 1,
                        info: '了解魅族',
                        Segmenting: '|'
                    },
                    {
                        id: 2,
                        info: '加入我们',
                        Segmenting: '|'
                    },
                    {
                        id: 3,
                        info: '联系我们',
                        Segmenting: '|'
                    },
                    {
                        id: 4,
                        info: 'Flyme',
                        Segmenting: '|'
                    },
                    {
                        id: 5,
                        info: '魅族社区',
                        Segmenting: '|'
                    },
                    {
                        id: 6,
                        info: '天猫旗舰店',
                        Segmenting: '|'
                    },
                    {
                        id: 7,
                        info: '问题反馈',
                        Segmenting: '|'
                    },
                    {
                        id: 8,
                        info: '线上销售授权名单公示',
                        Segmenting: '|'
                    },
                    {
                        id: 9,
                        info: '中文'
                    }
                ]
            }
        },
        created() {
            this._initData()
        },
        methods: {
            async _initData() {
                let dataUrl = await this.$axios.get('/apis/home/meizu_footer_link', {
                    params: {
                        name: 'meizu_footer_link'
                    }
                })
                if (dataUrl.data.code === 1 && dataUrl.status === 200) {
                    this.footer = dataUrl.data.result.dataUrl
                }
            }
        }
    };
</script>

<style scoped lang="stylus">
    .footer
        height 288px
        background #fff
        box-sizing border-box
        padding-top 48px
        padding-bottom 20px
        width 100%
        .footer-content
            margin 0 auto
            height 219px
            width 1240px
            .footer-content-top
                display flex
                .meizu-footer-service
                    display flex
                    flex-wrap wrap
                    height 116px
                    width 1000px
                    li
                        height 59px
                        width 240px
                        a
                            color #999
                            font-size 12px
                            img
                                vertical-align middle
                                width 30px
                                height 29px
                                margin-right 10px
                .onlive-server
                    display flex
                    height 116px
                    flex 1
                    justify-content flex-end
                    flex-wrap wrap
                    span
                        font-size 14px
                        color #999
                    .tel
                        color #00c3f5
                        font-size 30px
                        font-weight 400
                    .onlive-btn
                        padding 20px 0
        hr
            margin 20px 0
            background-color #999
        .footer-content-bottom
            height 53px
            width 1000px
            ul
                display flex
                justify-content flex-start
                li
                    height 18px
                    line-height 18px
                    a
                        color #999
                        font-size 14px
                        &:hover
                            color #31a5e7
                        span
                            margin 0 20px
            p
                font-size 14px
                color #999
                margin-top 17px
                vertical-align bottom
</style>
